<template>
  <div class="d-flex-center w-fit" style="height: 12px;">
    <div v-for="item in 3" :key="item" class="state mr-2" :class="[ item <= checkState ? 'state-' + checkState : 'state-0']" />
    <span class="fs-12">{{ ['', '差', '弱', '强'][checkState] }}</span>
  </div>
</template>

<script setup lang="ts">
import { passwordTag } from '@utils/form-rule'

const props = defineProps<{
  password: string
}>()

onMounted(verify)

watch(() => props.password, verify)

const checkState = ref(0)

function verify () {
  if (!props.password) {
    checkState.value = 0
    return
  }
  if (passwordTag(props.password) instanceof Error) {
    checkState.value = 1
  } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[-+.@#$%^&*!])[\w\-+.@#$%^&*!]{12,}$/.test(props.password)) {
    checkState.value = 3
  } else {
    checkState.value = 2
  }
}
</script>

<style lang="scss" scoped>
.state {
  width: 30px;
  height: 4px;
}
.state-0 {
  background-color: var(--el-border-color);
}
.state-1 {
  background-color: var(--el-color-danger)
}
.state-2 {
  background-color: var(--el-color-warning)
}
.state-3 {
  background-color: var(--el-color-success)
}
</style>
